<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue-router.js"></script>
</head>
<body>
<div id="box">
    <router-link to="/user">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
</div>

<script>
    /*
    声明式导航：通过点击链接实现导航的方式，叫做声明式导航
        例如：普通页面中的 a 标签 或 vue 的router-link 标签


    编程式导航：通过JavaScript形式的API实现导航的方式，叫做编程式导航
        例如：普通页面的 location.href

        this.$router.push("hash地址");   跳到指定的页面
            $router.push("/home");   字符串
            $router.push({path:"/home"});  对象
            $router.push({name:"user",params:{userId:3}});  命名路由，params传递数据
                this.$route.params.userId
            $router.push({path:"/reg",query:{uname:'lisi'}});  带查询参数，query传递参数，变成 /reg?uname=lisi
                this.$route.query.uname
        区别：
            params与query相比，更加安全。
            params 是用的name 不带/；query用的是path 带着/。

        this.$router.go(n)     页面前进或后退
    * */

    const User = {
        template:`<div>
            <div>登录界面</div>
            <button @click="pushR">跳转到注册页面</button>
        </div>`,
        methods:{
            pushR(){
                this.$router.push("/register");
            }
        }
    };

    const Register = {
        template:`<div>
            <div>注册界面</div>
            <button @click="goP">返回上一页</button>
        </div>`,
        methods:{
            goP(){
                this.$router.go(-1);
            }
        }
    };

    var router = new VueRouter({
        routes:[
            {path:"/",redirect:"/user"},
            {path:"/user",component:User},
            {path:"/register",component:Register}

        ]
    });

    var vm = new Vue({
        el:"#box",
        router:router,
        data:{

        }
    })
</script>
</body>
</html>
